<template>
  <div class="detail" ref="detailRef">
    <van-tabs scrollspy sticky v-model:active="active">
      <div class="main" v-if="mainPart" v-memo="[mainPart]">
        <van-tab title="概览">
          <van-nav-bar
            class="navbar"
            title="房屋详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
          />
        </van-tab>

        <van-tab title="轮播">
          <DetailSwipe :swipeData="mainPart.topModule?.housePicture.housePics" />
        </van-tab>

        <van-tab title="描述">
          <DetailInfos :topModule="mainPart.topModule" />
        </van-tab>

        <van-tab title="设施">
          <Facility :houseFacility="mainPart.dynamicModule.facilityModule?.houseFacility" />
        </van-tab>
        <van-tab title="房东">
          <Landlord :landlordModule="mainPart.dynamicModule.landlordModule" />
        </van-tab>
        <van-tab title="评论">
          <Comment :commentModule="mainPart.dynamicModule.commentModule"></Comment>
        </van-tab>
        <van-tab title="须知">
          <Notice :orderRules="mainPart.dynamicModule.rulesModule?.orderRules"></Notice>
        </van-tab>
        <van-tab title="周边">
          <Map  :positionModule="mainPart.dynamicModule.positionModule"></Map>
        </van-tab>
        <van-tab title="价格">
          <Intro :introductionModule="mainPart.introductionModule"></Intro>
        </van-tab>
        <actionBar :currentHouse="currentHouse"></actionBar>
      </div>
    </van-tabs>
  </div>
</template>

<script setup>
  import { ref, computed, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { getDetailInfos } from '@/services'
  import DetailSwipe from './cpms/detail_01-swiper.vue'
  import DetailInfos from './cpms/detail_02-infos.vue'
  import Facility from './cpms/detail_03-facility.vue'
  import Landlord from './cpms/detail_04-landlord.vue'
  import Comment from './cpms/detail_05-comment.vue'
  import Notice from './cpms/detail_06-notice.vue'
  import Map from './cpms/detail_07-map.vue'
  import Intro from './cpms/detail_08-intro.vue'
  import actionBar from './cpms/detail_09-action-bar.vue'
  import useScroll from '@/hooks/useScroll'
  const route = useRoute()
  const router = useRouter()
  const detailInfos = ref()
  const houseId = route.params.id

  getDetailInfos(houseId).then((res) => {
    detailInfos.value = res.data
  })
  const mainPart = computed(() => detailInfos.value?.mainPart)

  const currentHouse = computed(() => detailInfos.value?.currentHouse)

  const onClickLeft = () => {
    router.back()
  }

  // const detailRef = ref()
  // const { scrollTop } = useScroll(detailRef)
  // const showTabcontrol = computed(() => {
  //   return scrollTop.value >= 300
  // })
  // watch(showTabcontrol, (newValue, oldValue) => {
  //   if (newValue) {
  //     display.value = 'block'
  //   } else {
  //     display.value = 'none'
  //   }
  // })
  const active = ref(0)

  const display = ref('block')
</script>

<style scoped>
  :global(.van-tabs--line .van-tabs__wrap) {
    height: 45px !important;
    display: v-bind('display');
  }

  .detail {
    height: calc(100vh);
    z-index: 10;
    position: relative;
    background-color: #f5f7fa;
    overflow-y: auto;
  }
  .navbar {
    font-weight: 800;
    
  }
</style>
